* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html, body { scroll-behavior:smooth;}
.banner {
    width: 100%;
    height: 100vh;
    border: 1px solid red;
    position: relative;
    overflow: hidden;
    .index {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        transition: 800ms;
        .index-img {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
    }
    #top {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 60px;
        height: 60px;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        font-size: 48px;
        color: white;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
    }
    #bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 60px;
        height: 60px;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        font-size: 48px;
        color: white;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
    }
    #xuanze {
        display: flex;
        list-style: none;
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        >li {
            width: 20px;
            height: 20px;
            background-color: white;
            margin-right: 15px;
            border-radius: 50%;
            &:last-child {
                margin-right: 0;
            }
        }
    }
}